<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>CMS后台管理系统</title>

<!-- Bootstrap core CSS-->
<link href="/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="/libs/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<!-- Custom styles for this template-->
<link href="/libs/sb-admin/sb-admin.css" rel="stylesheet">

</head>

<body id="page-top">

	<!-- 后台管理系统顶部 -->
	<jsp:include page="_inc_top.jsp" />

	<div id="wrapper">

		<!-- 后台管理系统左部菜单 -->
		<jsp:include page="_inc_left.jsp" />

		<div id="content-wrapper">

			<div class="container-fluid">

				<!-- 面包屑 -->
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="/admin/home">后台首页</a></li>
					<li class="breadcrumb-item active">文章管理</li>
				</ol>

				<!-- Page Content -->
				<h1>文章管理</h1>

				<hr>
				<table class="table">
					<thead>
						<tr>
							<th scope="col">标题</th>
							<th scope="col">分类</th>
							<th scope="col">点击量</th>
							<th scope="col">时间</th>
							<th scope="col">操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${blogs}" var="blog">
							<tr id="item_${blog.id}">
								<td>${blog.title}</td>
								<td>${blog.category.name}</td>
								<td>${blog.hits}</td>
								<td><fmt:formatDate value="${blog.updated}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
								<td>
									<!-- 审核状态为通过（status=1）时，审核、编辑按钮不显示 --> <c:if test="${blog.status !=1}">
										<button type="button" class="auditBtn btn btn-success btn-sm" blogId="${blog.id}">审核</button>
									</c:if>
									<button type="button" class="hotBtn btn btn-success btn-sm" onclick="setHot(${blog.id});">热门</button>
									<button type="button" class="removeBtn btn btn-success btn-sm" onclick="removeBlog(${blog.id});">删除</button>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>

				<nav aria-label="Page navigation example">
					<ul class="pagination">
						<c:choose>
							<c:when test="${currentPage <= 1 }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${currentPage-1 }" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:otherwise>
						</c:choose>

						<c:forEach begin="1" end="${pages}" var="pageNo">
							<%-- <c:choose>
								<c:when test="${currentPage == pageNo}">
									<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=1">${pageNo}</a></li>

								</c:when>
								<c:otherwise> --%>
									<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${pageNo}">${pageNo}</a></li>
								<%-- </c:otherwise>
							</c:choose> --%>
						</c:forEach>

						<c:choose>
							<c:when test="${currentPage >= pages }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${currentPage+1}" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:otherwise>
						</c:choose>
					</ul>
				</nav>
			</div>
			<!-- /.container-fluid -->

			<!-- Sticky Footer -->
			<footer class="sticky-footer">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Copyright © Your Website 2018</span>
					</div>
				</div>
			</footer>

		</div>
		<!-- /.content-wrapper -->

	</div>
	<!-- /#wrapper -->

	<!-- Scroll to Top Button-->
	<a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i>
	</a>

	<!-- Logout Modal-->
	<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
					<button class="close" type="button" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">Select " Logout" below if you are ready to end your current session.</div>
				<div class="modal-footer">
					<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
					<a class="btn btn-primary" href="login.html">Logout</a>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript-->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<!-- Custom scripts for all pages-->
	<script src="/libs/sb-admin/sb-admin.min.js"></script>

	<script type="text/javascript">
	$(function() {

		$(".auditBtn").click(
				function() {
					location = "/admin/toAudit?articleId="
							+ $(this).attr("blogId")
				});
		$(".updateBtn").click(
				function() {
					location = "/article/editArticle/"
							+ $(this).attr("blogId")
				});
	})
	function removeBlog(id){
			if(confirm("您是否要删除这篇博客？")){
				$.ajax({
					url:'/article/remove?id=' + id,
					type:'get',
					success:function(data){
						console.log(data);
						if(data.status){
							$("#item_" + id).remove();
						}else{
							alert(data.message);
						}
					}
				});
			}
			return false;
		}
	function setHot(id){
		if(confirm("确定需要把此篇文章设置热门？")){
			$.ajax({
				url:'/article/setHot?id=' + id,
				type:'get',
				success:function(data){
						alert(data.message);
				}
			});
		}
		return false;
	}
	</script>
</body>

</html>
